<template>
  <div class="addView_main">
    <a-card title="添加硒都景点">
      <a-card
        hoverable
        class="card_message"
        v-for="item in viewListData"
        :key="item.id"
				style="margin:0 10px"
      >
        <template #cover>
          <img :src="item?.imageUrl" />
        </template>
        <a-card-meta :title="item?.name">
          <template #description>
            <p>{{ item?.level }}</p>
            <p>地址：{{ item?.address }}</p>
            <span>{{ item?.description }}</span>
          </template>
        </a-card-meta>
      </a-card>
      <a-card hoverable class="card_add" @click="add_foot">
        <PlusCircleOutlined
          style="
            width: 100%;
            height: 100%;
            font-size: 4em;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        />
      </a-card>
    </a-card>
		<a-modal
      v-model:visible="dialogStatu"
      title="添加景点"
      @ok="handleOk"
      ok-text="添加"
      cancel-text="取消"
      width="50em"
      destroyOnClose
      :confirmLoading="addLoading"
    >
      <div style="width: 100%">
        <a-form
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="景点名称">
            <a-input v-model:value="formState.name" />
          </a-form-item>
					<a-form-item label="景点地址">
            <a-input v-model:value="formState.address" />
          </a-form-item>
          <a-form-item label="景点描述">
            <a-textarea
              autosize
              v-model:value="formState.description"
            />
          </a-form-item>
					<a-form-item label="景点等级">
						<a-rate v-model:value="formState.levelId" />
          </a-form-item>
          <a-form-item label="美食图片">
            <a-upload
              list-type="picture"
              v-model:file-list="picList"
              :beforeUpload="() => false"
              :disabled="picList.length >= 1"
            >
              <a-button @click="handleChange">
                <upload-outlined></upload-outlined>
                选择图片
              </a-button>
              <a-button
                @click="removePic"
                style="margin-left: 10px"
                v-show="picList.length >= 1"
              >
                删除图片
              </a-button>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, UnwrapRef, reactive } from "vue";
import { addView, viewList } from "@/utils/fetch/api";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
interface FormState {
  name: string;
  description: string;
  image: any;
	levelId:any;
	address:any;
}
export default defineComponent({
  components: {
    PlusCircleOutlined,
  },
  setup() {
    const loading = ref<Boolean>(false);
    const viewListData = ref<any>();
    const refresh = async () => {
      try {
        const data = await viewList({ pageNum: 1 });
        viewListData.value = data.data.data;
        console.log("viewListData.value: ", viewListData.value);
      } catch (err) {
        console.error(err);
      }
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });
		
		const addLoading = ref<boolean>(false);
    const dialogStatu = ref<boolean>(false);
    const add_foot = () => {
      dialogStatu.value = true;
    };
    const handleOk = async () => {
      if (formState.name.length <= 0) {
        message.warning("请填写景点名称！");
        return;
      }
			if (formState.address.length <= 0) {
        message.warning("请填加景点描述！");
        return;
      }
      if (formState.description.length <= 0) {
        message.warning("请填加景点地址！");
        return;
      }
			if (formState.levelId <= 0) {
        message.warning("请选择景点等级！");
        return;
      }
      if (picList.value.length <= 0) {
        message.warning("请选择美食展示图片！");
        return;
      }

      addLoading.value = true;
      const formdata: any = new FormData();
      formdata.append("name", formState.name);
      formdata.append("description", formState.description);
      formdata.append("image", picList.value[0].originFileObj);
      formdata.append("address", formState.address);
			formdata.append("levelId", formState.levelId);

      try {
        const data = await addView(formdata);
        message.success("添加完成！");
        refresh();
        setTimeout(() => {
          dialogStatu.value = false;
        }, 1000);
      } catch (err) {
        console.error(err);
      } finally {
        addLoading.value = false;
      }
    };
		const picList = ref<any>([]);
    const formState: UnwrapRef<FormState> = reactive({
      name: "",
      description: "",
      image: picList.value[0],
      // addressId: current.value[0],
			address:'',
			levelId:5
    });

    const handleChange = () => {
      if (picList.value.length >= 1) {
        message.warning("只能选择一张图片！");
      }
    };
    const removePic = () => {
      picList.value = [];
    };
    return {
      loading,
      viewListData,
			dialogStatu,
      handleOk,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      picList,
      handleChange,
      removePic,
      addLoading,
			add_foot
    };
  },
});
</script>

<style lang="less" scoped>
.addView_main {
  width: 100%;
  height: 100%;
  background: white;
  /deep/.ant-card-head-title {
    font-size: 3em;
  }
  .card_message {
    width: 30em;
    float: left;
  }
  .card_message::after {
    content: "";
    clear: both;
  }
  .card_add {
    width: 30em;
    display: inline-block;
    margin: 0 10px;
    height: 25em;
    color: #eee;
    float: left;
    /deep/.ant-card-body {
      width: 100%;
      height: 100%;
    }
  }
  .card_add:hover {
    color: rgb(134, 133, 133);
  }
  .card_add::after {
    content: "";
    clear: both;
  }
}
</style>
